"use client";
import { usePathname, useRouter } from "@/i18n/routing";
import { Popup, Tabs } from "antd-mobile";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { FC, ReactNode, useState } from "react";

interface Props {}

interface LevelProps {
    url: string;
    level: string;
    body: ReactNode;
    footer: ReactNode;
}
const LevelCard: FC<LevelProps> = (props) => {
    const { url, level, body, footer } = props;
    return (
        <div className={"relative"}>
            <div
                className={
                    "absolute left-1/2 -translate-x-1/2 rounded-[0.1389rem]" +
                    " border-[1px]" +
                    " w-[0.8333rem] border-[#00a1f5]"
                }
            >
                <Image
                    src={url}
                    alt={""}
                    className={"rounded-[0.1389rem]"}
                    width={130}
                    height={100}
                />
                <div
                    className={
                        "absolute bottom-[0.0208rem] right-[0.0347rem] h-[0.1806rem] w-[0.1806rem] rounded" +
                        " flex items-center justify-center bg-[#00a1f5] text-[0.0972rem] font-black"
                    }
                >
                    {level}
                </div>
            </div>
            <div
                className={
                    "mt-[0.6944rem] rounded-[0.0694rem] border-[1px] border-[#22343e] pt-[0.2083rem]" +
                    " px-[0.0694rem] text-center"
                }
            >
                {body}
                <div className={"-mx-[0.0694rem] border-t-[1px] border-[#22343e] py-[0.0694rem]"}>
                    {footer}
                </div>
            </div>
        </div>
    );
};
export const CommissionModel: FC<{ visible: boolean; setVisible: (value: boolean) => void }> = (
    props
) => {
    const { visible, setVisible } = props;
    return (
        <Popup
            visible={visible}
            getContainer={null}
            onMaskClick={() => {
                setVisible(false);
            }}
            position="right"
            bodyStyle={{ width: "100%" }}
        >
            <div className={"h-[100%] w-[100%] overflow-scroll bg-[#0e1b22]"}>
                <div
                    className={
                        "absolute top-0 flex items-center justify-between " +
                        " h-[0.4167rem] w-[100%] border-[1px] bg-[#17181c] px-[0.1389rem]" +
                        " z-10 border-[#666]"
                    }
                >
                    <p>Regras de cálculo de comissão</p>
                    <i className={"iconfont icon-guanbi"} onClick={() => setVisible(false)}></i>
                </div>
                {/*body*/}
                <div className={"mt-[0.4167rem] px-[0.1389rem] pt-[0.1389rem]"}>
                    <div className={"rounded-[5px] border-[1px] border-[#22343e] p-[0.0694rem]"}>
                        <div className={"flex items-center"}>
                            <div className={"relative ml-[0.0694rem]"}>
                                <Image
                                    src={"/avatar/1.png"}
                                    alt={""}
                                    className={"rounded-[0.1389rem] border-[2px] border-[#e5811d]"}
                                    width={168}
                                    height={168}
                                />
                                <div
                                    className={
                                        "absolute bottom-[0.0347rem] right-[0.0556rem]" +
                                        " w-[0.2778rem]" +
                                        " flex h-[0.2778rem] rounded-[50%] bg-[#e5811d]" +
                                        " items-center justify-center"
                                    }
                                >
                                    A
                                </div>
                            </div>
                            <div className={"ml-[0.2083rem] text-[#465f80]"}>
                                <p> O C3 é poderoso e também possui </p>
                                <span className={"text-[#e5811d]"}>110</span>
                                <span>/million</span>
                            </div>
                        </div>

                        <div className={"mt-[0.1389rem]"}>
                            Desempenho total 3,31M, Bônus total do agente{" "}
                            <span className={"text-[#e5811d]"}>2500</span>
                        </div>
                        <div>
                            Desempenho de subordinado 180K, Contribuiu
                            <span className={"text-[#e5811d]"}> 1980</span>
                        </div>
                        <div className={"text-center"}>
                            Outro desempenho 3,13M, Contribuir
                            <span className={"text-[#e5811d]"}> 520</span>
                        </div>
                    </div>

                    <div className={"mt-[0.1042rem] grid grid-cols-3"}>
                        <Image
                            src={"/avatar/right.png"}
                            alt={""}
                            width={80}
                            className={"justify-self-end"}
                            height={200}
                        />
                        <Image
                            src={"/avatar/up.png"}
                            className={"justify-self-center"}
                            alt={""}
                            width={23}
                            height={100}
                        />
                        <Image src={"/avatar/left.png"} alt={""} width={80} height={200} />
                    </div>
                    <div className={"grid grid-cols-3 text-[0.0972rem]"}>
                        <div className={"text-center"}>
                            <p>Contribuição de B1:</p>
                            <p className={"text-center text-[#e5811d]"}>1320</p>
                            <p>
                                Outras contribuições de C1 e C2:{" "}
                                <span className={"text-[#e5811d]"}>520</span>{" "}
                            </p>
                        </div>

                        <div className={"text-center"}>
                            <p> Contribuir para A: </p>
                            <p className={"text-[#e5811d]"}>440</p>
                        </div>
                        <div className={"text-center"}>
                            <p> Contribuição de B3: </p>
                            <p className={"text-[#e5811d]"}>220</p>
                            <p>
                                Outras contribuições de C3:
                                <span className={"text-[#e5811d]"}> 0</span>
                            </p>
                        </div>
                    </div>

                    <div className={"mt-[3px] grid grid-cols-3 gap-[0.1389rem]"}>
                        <LevelCard
                            url={"/avatar/2.png"}
                            level={"B1"}
                            body={
                                <div className={"text-[#495b73]"}>
                                    Subagente ganha, geralmente
                                    <p>
                                        <span className={"text-[#e5811d]"}>70</span> /10K
                                    </p>
                                </div>
                            }
                            footer={<p>Apostas válidas 120K</p>}
                        />
                        <LevelCard
                            url={"/avatar/3.png"}
                            level={"B2"}
                            body={
                                <div className={"text-[#495b73]"}>
                                    B2 não tem subordinados, por isso não tem lucros
                                </div>
                            }
                            footer={<p>Apostas válidas 120K</p>}
                        />
                        <LevelCard
                            url={"/avatar/4.png"}
                            level={"B3"}
                            body={
                                <div className={"text-[#495b73]"}>
                                    Muito bem subagente, ganhou
                                    <p>
                                        <span className={"text-[#e5811d]"}>110</span> /10K
                                    </p>
                                </div>
                            }
                            footer={<p>Apostas válidas 20K</p>}
                        />
                    </div>

                    <div className={"mt-[0.0347rem] grid grid-cols-3"}>
                        <Image
                            src={"/avatar/up.png"}
                            alt={""}
                            width={25}
                            className={"justify-self-center"}
                            height={100}
                        />
                        <div className={"relative"}>
                            <Image
                                src={"/avatar/left.png"}
                                alt={""}
                                width={80}
                                className={
                                    "absolute -left-[0.2778rem] top-0 h-[100%]" +
                                    "w-[0.4722rem] transition"
                                }
                                height={100}
                            />
                        </div>

                        <Image
                            src={"/avatar/up.png"}
                            alt={""}
                            width={25}
                            className={"justify-self-center"}
                            height={100}
                        />
                    </div>
                    <div className={"grid grid-cols-3 text-[0.0972rem]"}>
                        <div className={"text-center"}>
                            <p>Contribuir para A:</p>
                            <p className={"text-center text-[#e5811d]"}>400</p>
                            <p>Contribuir para B1: </p>
                            <p className={"text-[#e5811d]"}>700</p>
                        </div>

                        <div className={"text-center"}>
                            <p> Contribuir para A: </p>
                            <p className={"text-[#e5811d]"}>120</p>
                            <p>Contribuir para B1:</p>
                            <p className={"text-[#e5811d]"}>210</p>
                        </div>
                        <div className={"text-center"}>
                            <p> Contribuir para A: </p>
                            <p className={"text-[#e5811d]"}>220</p>
                            <p>Contribuir para B3:</p>
                            <p className={"text-[#e5811d]"}> 0</p>
                        </div>
                    </div>
                    <div className={"mt-[3px] grid grid-cols-3 gap-[0.1389rem]"}>
                        <LevelCard
                            url={"/avatar/5.png"}
                            level={"B1"}
                            body={
                                <div className={"text-[#495b73]"}>
                                    C1 não tem subordinados, por isso não tem lucros
                                </div>
                            }
                            footer={<p>Apostas válidas 100K</p>}
                        />
                        <LevelCard
                            url={"/avatar/6.png"}
                            level={"B2"}
                            body={
                                <div className={"text-[#495b73]"}>
                                    <div data-v-a24e5faa="" className="desc-txt">
                                        {" "}
                                        C2 não tem subordinados, por isso não tem lucros
                                    </div>
                                </div>
                            }
                            footer={<p>Apostas válidas 30K</p>}
                        />
                        <LevelCard
                            url={"/avatar/7.png"}
                            level={"B3"}
                            body={
                                <div className={"text-[#495b73]"}>
                                    C3 não tem subordinados, por isso não tem lucros
                                </div>
                            }
                            footer={<p>Apostas válidas 3000K</p>}
                        />
                    </div>
                    <div className={"mt-[5px]"}>
                        <p>Por exemplo:</p>
                        <p>
                            Neste website o bónus do agente é calculado por apostas. Por exemplo, se
                            as apostas forem 10-200000, a taxa de bónus correspondente será
                            70/10000, e se as apostas forem superiores a 3000000, o bónus de agente
                            é 110/10000. A é o agente do website, ele recruta B1, B2 e B3 como seus
                            agentes e B1 também recruta C1 e C2 como seus agentes. B2 não tem
                            agentes e B3 tem apenas um agente C3. Alguns dias depois, a aposta
                            efetiva do próprio B1 é de 120.000, a aposta efetiva de B2 é de 40.000,
                            as apostas efetivas de B3 são 20.000, as apostas efetivas do C1 são
                            100.000, as apostas efetivas do C2 são 30.000, C3 Eu tenho 3 milhões de
                            apostas eficazes, Em seguida, o desempenho total de B1 vem de 130.000 de
                            C1 e C2, e a taxa de retorno da comissão correspondente é 70/10.000; B2
                            não tem desempenho subordinado 0; a taxa de retorno da comissão é
                            110/10.000; a tem 180.000 do Equipe direta e 3,13 milhões de outras
                            equipes, com um desempenho total de 3,31 milhões, e a taxa de retorno
                            correspondente é 110/10.000.{" "}
                        </p>
                        <p>Por conseguinte, o bónus é calculado da seguinte forma:</p>
                        <p>
                            1. Equipa direta: refere-se aos membros do desenvolvimento vertical, que
                            são coletivamente chamados de equipa direta.{" "}
                        </p>
                        <p>
                            (1) B1, B2, B3 contribuem para A: (120000+40000+20000)x110/10000=1980.{" "}
                        </p>
                        <p> (2) C1 e C2 contribuem para B1:(100000+30000)x70/10000=910. </p>
                        <p>(3) C3 contribui para B3: 3 milhões x 110/10000=33000.</p>
                        <p>
                            2. Outras equipas: refere-se aos membros do desenvolvimento de
                            subordinados, subordinados, etc., que são coletivamente chamados de
                            outras equipas; porque este sistema pode desenvolver subordinados
                            indefinidamente, para melhor compreensão, este artigo apenas toma como
                            exemplo uma estrutura de 2 níveis.{" "}
                        </p>
                        <p>
                            (1) De C1 e C2: Visto que o desempenho total de B1 é de 130000, tem
                            apenas uma taxa de desconto de 70/10000, enquanto que o desempenho total
                            de A é de 3,31 milhões, e tem uma taxa de desconto de 110/10000. Então a
                            diferença de desconto entre A e B1 é de: 110-70=40/100000, esta
                            diferença é a parte contribuída por C1 e C2 para A, portanto C1 e C2
                            contribuem para A: (100000+30000)×40/10000=520.{" "}
                        </p>
                        <p>
                            2. Outras equipas: refere-se aos membros do desenvolvimento de
                            subordinados, subordinados, etc., que são coletivamente chamados de
                            outras equipas; porque este sistema pode desenvolver subordinados
                            indefinidamente, para melhor compreensão, este artigo apenas toma como
                            exemplo uma estrutura de 2 níveis.{" "}
                        </p>
                        <p>3. Resumo:</p>
                        <p>
                            (1) C3 é poderoso, indiretamente permite que todo o desempenho de A
                            desfrute de uma proporção maior de retornos da comissão.{" "}
                        </p>
                        <p>
                            (2) B2 pode ser preguiçoso, e não tem vantagem se não houver
                            desenvolvimento de subordinados.{" "}
                        </p>
                        <p>
                            (3) Apesar de B3 se ter juntado relativamente tarde e pertencer aos
                            subordinados de A, o seu subordinado C3 é poderoso, permitindo que B3
                            desfrute diretamente da mais alta taxa de desconto, e A não pode ganhar
                            diretamente a diferença de B3. Por isso, de quem é a posição de B3
                            quando este se junta? Os benefícios dos subordinados, independentemente
                            do nível em que se encontrem, nunca serão afetados, deixarão de sofrer
                            as perdas de outros subordinados, e o seu desenvolvimento não será
                            restringido.
                        </p>
                        <p>
                            (4) Este é um modelo de agência absolutamente justo, e não prejudicará
                            sempre quem se juntar mais tarde.
                        </p>
                    </div>
                </div>
            </div>
        </Popup>
    );
};
const App: FC<Props> = (props) => {
    const pathname = usePathname();
    const t = useTranslations("TabsCom");
    const router = useRouter();

    const activeTab = pathname.split("/").at(-1);

    const [visible, setVisible] = useState(false);

    const tabs = [
        { id: 1, page: "summary", content: t("PAINEL"), x: 0.27 },
        { id: 2, page: "referrals", content: t("REFERÊNCIAS"), x: 0.93 },
        { id: 3, page: "report", content: t("RELATÓRIO"), x: 1.7 },
        { id: 4, page: "payments", content: t("PAGAMENTOS"), x: 2.48 },
        { id: 5, page: "faq", content: t("FAQ"), x: 3.06 },
        { id: 6, page: "", content: "TUTORIAL", x: 3.06 },
    ] as const;
    const tabsChange = (page: string) => {
        if (page) {
            router.replace(`/affiliate/${page}`);
        } else {
            setVisible(true);
        }
    };

    return (
        <div
            className={`layout-tabs relative flex h-[0.4rem] items-center justify-between text-[0.13rem]`}
        >
            <Tabs
                onChange={tabsChange}
                stretch={true}
                style={{
                    "--active-line-color": "#ff6a01",
                    "--active-title-color": "#ff6a01",
                    "--title-font-size": "0.11rem",
                }}
                activeKey={activeTab}
            >
                {tabs.map((tab) => {
                    return (
                        <Tabs.Tab
                            key={tab.page}
                            title={tab.content}
                            className={"text-[grey]"}
                        ></Tabs.Tab>
                    );
                })}
            </Tabs>
            <CommissionModel visible={visible} setVisible={setVisible} />
        </div>
    );
};
export default App;